<template>
    <div class="common-tab-content">
        <div class="query-table-page">
            <div class="query-box">
                <el-form :inline="true" :model="formObj" class="common-query-form">
                    <el-form-item label="栏目">
                        <el-cascader :options="lmList" v-model="formObj.type" :props="{label: 'name', value: 'code'}" clearable />
                    </el-form-item>
                    <el-form-item label="标题关键字">
                        <el-input v-model="formObj.user" placeholder="请输入标题关键字" clearable/>
                    </el-form-item>
                    <el-form-item label="开始日期">
                        <el-date-picker
                                v-model="formObj.date"
                                type="date"
                                placeholder="请选择开始日期"
                                clearable
                        />
                    </el-form-item>
                    <el-form-item label="结束日期">
                        <el-date-picker
                                v-model="formObj.date"
                                type="date"
                                placeholder="请选择结束日期"
                                clearable
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-button :loading="loading" type="primary" @click="queryFn">查询</el-button>
                        <el-button :loading="loading" type="primary" @click="initFn">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="table-box">
                <div class="table-list">
                    <el-table :key="tbKey" ref="commonTable" :data="tableData" border stripe style="width: 100%" height="620px">
                        <el-table-column type="selection" label="全选" width="50"/>
                        <el-table-column type="index" label="序号" width="60"/>
                        <el-table-column prop="title" label="标题"/>
                        <el-table-column prop="clickNumber" label="点击量" width="100px"/>
                        <el-table-column prop="itemName" label="所属栏目" width="100px"/>
                        <el-table-column prop="index" label="排序号" width="80px"/>
                        <el-table-column prop="uploadTime" label="上传时间" width="180px"/>
                        <el-table-column prop="id" label="操作" width="100px">
                            <template #default="scope">
                                <span @click="previewFn" class="common-table-btn">预览</span>
                                <span @click="topFn" class="common-table-btn">排序</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="paging-box">
                    <el-pagination
                            v-model:current-page="currentPage"
                            v-model:page-size="pageSize"
                            :page-sizes="[10, 20, 50, 100]"
                            :size="size"
                            :background="background"
                            layout="total, prev, pager, next, sizes, jumper"
                            :total="124"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                    />
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import {reactive, ref, onMounted} from "vue"
import {ElMessageBox} from "element-plus";
import {lbList, lmList} from "@/utils/dict";
const formObj = reactive({
    user: '',
    region: '',
    type: '',
    date: ''
})
const tableData = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const size = ref('default')
const background = ref(false)
const loading = ref(false)
const commonTable = ref(null)
const tbKey = ref(0)
function queryFn() {
    loading.value = true
    setTimeout(() => {
        loading.value = false
    }, 1500)
}
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}
const initFn = () => {
    loading.value = true
    formObj.value = {
        user: '',
        region: '',
        type: '',
        date: ''
    }
    setTimeout(() => {
        loading.value = false
    }, 1500)
}
const previewFn = () => {
    window.open('http://193.112.98.218:18081/hubei/#/MsgDetails?menuIndex=2', '_blank')
}
const topFn = (obj) => {
    ElMessageBox.prompt('请输入序号', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        buttonSize: 'large',
        showClose: false,
        customClass: `hb-confirm2`,
        inputPattern: /^(?:0|[1-9]\d*)$/,
        inputErrorMessage: '请输入大于等于0的整数',
    })
            .then(({ value }) => {
                $msg({
                    type: 'success',
                    message: `排序成功`,
                })
            })
}
onMounted(() => {
    for (let i = 0; i < 20; i++) {
        tableData.value.push({
            title: '[置顶][图]湖北省2025年高职高专普通批第二次征集志愿投档分数线(含历史向和物理向）[普通高校招生]',
            clickNumber: '1000',
            itemName: '要闻公告',
            index: i + 1,
            uploadTime: '2021-01-01 12:09:45'
        })
    }
})
</script>
<style scoped lang="less">

</style>
